<template>
  <div>
    ==={{ $store.state.obj.n }}==== modules=>getters:{{ Stotal }}=={{
      $store.getters['books/Stotal']
    }}==={{ total }}=== 御剑乘风来,除魔天地间!===modules:{{
      $store.state.msg1.msg
    }}===mapState:{{ msg }}
    <input type="button" value="更改msg" @click="changeMsg" />
    <hr />
    <img :src="$store.state.userInfo.logo" alt="" />
    <hr />
    <img :src="userInfo.logo" alt="" />
    <input type="button" value="使用mutations更改logo" @click="changeLogo" />
    <hr />
    <hr />

    <hr />
    <ul>
      <li v-for="(item, index) in $store.state.books2" :key="index">
        <img :src="item.img" alt="" />
        <p>价格：{{ item.price }}</p>
        <p>名称：{{ item.name }}</p>
      </li>
    </ul>

    <Home></Home>
  </div>
</template>       
<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
import Home from '@/views/Home.vue' //  @=>src
export default {
  name: '',
  components: {
    Home,
  },
  data() {
    return {
      arr: [1, 2, 3, 4],
    }
  },
  created() {
    console.log(this, 999)
    // this.$store.dispatch('AddCount', 5)
    this.AddCount(6)

    this.$store.dispatch('AgetBooks')
  },
  computed: {
    ...mapGetters('books', ['Stotal']),
    ...mapState(['msg', 'userInfo']),
    total() {
      return this.arr.reduce((sum, item) => sum + item, 0)
    },
  },
  methods: {
    ...mapMutations(['setLogo']),
    ...mapMutations('msg1', ['setMsg']), //  第一个参数：模块名, 模块中的函数
    ...mapActions('obj', ['AddCount']),
    changeLogo() {
      //  触发mutatiosn中的函数
      // this.$store.commit(
      //   'setLogo',
      //   'https://www.runoob.com/wp-content/uploads/2016/02/react.png'
      // )
      this.setLogo(
        'https://www.runoob.com/wp-content/uploads/2016/02/react.png'
      )
    },
    //  更改msg
    changeMsg() {
      console.log(this.$store.state.msg, 88)
      //this.setMsg({ m: 'hello   前端68', n: 'web 68' })
      // this.$store.state.msg = 'hello   前端68'  //strict: true,  错误的
      this.$store.commit('msg1/setMsg', { m: 'hello   前端68', n: 'web 68' }) // 'hello   前端68','web 68'
    },
  },
}
</script>
<style lang='less'  scoped>
img {
  width: 200px;
  height: 200px;
}
</style>